<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <link rel="stylesheet" type="text/css" href="../CSS/CSS.css">
    <script src="../js/ChuanKou.js"></script>
    <script>
       /* //isNaN 判断内容是否是数字 true为非数字 |  false 为数字
        window.onload = function () {
            document.body.onkeypress = function (e) {
                console.info(e.code + ':' + e.keyCode);
            };
        };*/
/*
        onclick
        ondblclick
        onresize
        onclose
        onfocus
        onblur
        onload
        onunloand
        onsubmit
        onreset
        onchange

        onkeyup
        onkeydown
        onkeypress

        onmouseup
        onmousedown
        onmousemove
        onmouseover
        onmouseout
        onmouseenter
        onmouseleave*/
       window.onload = function () {
           //onkeypress
           document.body.onkeypress = function (e) {
               console.info(e.code + ':' + e.keyCode);
           };
           //onkeyup
           document.body.onkeyup = function (aa) {
               alert(typeof(aa));
           };
           //按钮1 点击事件
           document.getElementById('btn1').onclick = function () {
               document.getElementById('btn1').style.backgroundColor = 'pink';
           };
           //按钮2 双击事件
           document.getElementById('btn2').ondblclick = function () {
               document.getElementById('btn2').style.backgroundColor = 'orange';
           };
           //窗口事件
           document.body.onresize = function () {
               alert(1);
           };
           //焦点事件
           document.getElementById('txt1').onfocus = function () {
               this.style.backgroundColor = 'pink';
           };
           //失去焦点事件
           document.getElementById('txt2').onblur = function () {
               this.value = '失去焦点!';
               this.style.color = '#9a9a9a';
               this.style.textIndent = '10px';
           };

           //鼠标按下去
           document.getElementById('txt3').onmousedown = function () {
               this.style.backgroundColor = 'red';
           };
           //鼠标松开
           document.getElementById('txt4').onmousedown = function () {
               this.style.backgroundColor = 'red';
           };
           document.getElementById('txt4').onmouseup = function () {
               this.style.backgroundColor = 'pink';
           };
           //鼠标悬停与离开
           document.getElementById('txt5').onmouseover = function () {
               this.style.backgroundColor = 'blue';
           };
           document.getElementById('txt5').onmouseout = function () {
               this.style.backgroundColor = 'gray';
           };

           //鼠标悬停与离开
           document.getElementById('txt6').onmouseenter = function () {
               this.style.backgroundColor = 'pink';
           };
           document.getElementById('txt6').onmouseleave = function () {
               this.style.backgroundColor = 'red';
           };
           //比较
           document.getElementById('mydiv1').onmouseover = function () {
               this.style.backgroundColor = 'gray';
           };
           document.getElementById('mydiv1').onmouseout = function () {
               this.style.backgroundColor = 'blue';
           };
           document.getElementById('mydiv2').onmouseenter = function () {
               this.style.backgroundColor = 'gray';
           };
           document.getElementById('mydiv2').onmouseleave = function () {
               this.style.backgroundColor = 'blue';
           };

           document.getElementById('mydiv4').onmouseover = function () {
               this.style.backgroundColor = 'gray';
           };
           document.getElementById('mydiv4').onmouseout = function () {
               this.style.backgroundColor = 'blue';
           };
           document.getElementById('mydiv3').onmouseenter = function () {
               this.style.backgroundColor = 'gray';
           };
           document.getElementById('mydiv3').onmouseleave = function () {
               this.style.backgroundColor = 'blue';
           };
           //onchange
           /*document.getElementById('txt7').onchange = function () {
            document.getElementById('txt7').onclick = function () {
            document.getElementById('txt7').value = '1';
            }
            }*/

       }
    </script>
</head>
<body>
<br/>
<fieldset><legend>关于事件</legend>
    <p>　<span class="f-w">文字描述</span>：JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。 </p>
    <hr/>
    <p class="f-w">　在js中有很多事件，那么我们就来一一解释一下，以下的事件</p>
    <p>　　<span class="red">onclick</span>：点击事件</p>
    <span class="f-w">　　事件示例：</span>　<button id="btn1">按钮</button><span style="color: #9a9a9a;">　　(点击按钮后 按钮的背景颜色变为粉色)</span>
    <p class="f-w">　　代码示例：</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {
      　　　 　 document.getElementById('btn1').<span class="red">onclick</span> = function () {
          　　　　  document.getElementById('btn1').style.backgroundColor = 'pink';
      　　　 　　};
  　　　　  }
        &lt;/script&gt;</pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">ondblclick</span>：双击事件</p>
    <span class="f-w">　　事件示例：</span>　<button id="btn2">按钮</button><span style="color: #9a9a9a;">　　(双击按钮后 按钮的背景颜色变为橙色)</span>
    <p class="f-w">　　代码示例：</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {
      　　　 　 document.getElementById('btn2').<span class="red">ondblclick</span> = function () {
          　　　　  document.getElementById('btn2').style.backgroundColor = 'orange';
      　　　 　　};
  　　　　  }
        &lt;/script&gt;</pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onresize</span>：窗口事件：会在窗口或框架被调整大小时发生</p>
    <span class="f-w">　　事件示例：拖动窗口大小，触发窗口事件，打印一个数字1</span>
    <p class="f-w">　　代码示例：</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {
      　　　 　 document.body.<span class="red">onresize</span> = function () {
               　  　　alert(1);
        　　　　};
  　　　　  }
        &lt;/script&gt;</pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onfocus</span>：焦点事件</p>
    <span class="f-w">　　事件示例：<input id="txt1" type="text"/></span><span style="color: #9a9a9a;">　　(点击文本框，使文本框得到焦点后，背景颜色变为粉色)</span>
    <p class="f-w">　　代码示例：</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {
      　　　 　 document.getElementById('txt1').<span class="red">onfocus</span> = function () {
             　　　　  this.style.backgroundColor = 'pink';
        　　　   };
  　　　　  }
        &lt;/script&gt;</pre>


    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onblur</span>：失去焦点事件</p>
    <span class="f-w">　　事件示例：<input id="txt2" type="text"/></span><span style="color: #9a9a9a;">　　(点击文本框，然后使文本框失去焦点，然后文本框内提示文字：失去焦点！)</span>
    <p class="f-w">　　代码示例：</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {
      　　　 　 document.getElementById('txt2').<span class="red">onblur</span> = function () {
              　　　　 this.value = '失去焦点!';
              　　　　 this.style.color = '#9a9a9a';
            　　　　   this.style.textIndent = '10px';
        　　　　};
  　　　　  }
        &lt;/script&gt;</pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onmousedown</span>：鼠标按下去</p>
    <span class="f-w">　　事件示例：<input id="txt3" type="text"/></span><span style="color: #9a9a9a;">　　(用鼠标点击文本框，当鼠标点下去，文本框背景颜色变为红色)</span>
    <p class="f-w">　　代码示例：</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {
      　　　 　  document.getElementById('txt3').<span class="red">onmousedown</span> = function () {
              　　　  this.style.backgroundColor = 'red';
        　　　　　　};
  　　　　  }
        &lt;/script&gt;</pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onmouseup</span>：鼠标松开</p>
    <span class="f-w">　　事件示例：<input id="txt4" type="text"/></span><span style="color: #9a9a9a;">　　(用鼠标点击文本框，当鼠标点下去，文本框背景颜色变为红色，当鼠标松开，背景颜色变为粉色)</span>
    <p class="f-w">　　代码示例：</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {
      　　　 　  document.getElementById('txt4').onmousedown = function () {
              　　　  this.style.backgroundColor = 'red';
        　　　　　　};
       　　　　　document.getElementById('txt4').<span class="red">onmouseup</span> = function () {
             　　　　　 this.style.backgroundColor = 'pink';
       　　　　    };
  　　　　  }
        &lt;/script&gt;</pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onmouseover</span>：鼠标悬停 与 <span class="red">onmouseout</span>：鼠标离开</p>
    <span class="f-w">　　事件示例：<input id="txt5" type="text"/></span><span style="color: #9a9a9a;">　　(当鼠标悬停在文本框，文本框变蓝色；当鼠标离开文本框，文本框变灰色)</span>
    <p class="f-w">　　代码示例：</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {
      　　　 　  document.getElementById('txt5').<span class="red">onmouseover</span> = function () {
              　　　　 this.style.backgroundColor = 'blue';
        　　　   };
     　　　      document.getElementById('txt5').<span class="red">onmouseout </span>= function () {
            　　　　   this.style.backgroundColor = 'gray';
         　　　  };
  　　　　  }
        &lt;/script&gt;</pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onmouseenter</span>：鼠标悬停 与 <span class="red">onmouseleave</span>：鼠标离开</p>
    <span class="f-w">　　事件示例：<input id="txt6" type="text"/></span><span style="color: #9a9a9a;">　　(当鼠标悬停在文本框，文本框变粉色；当鼠标离开文本框，文本框变红色)</span>
    <p class="f-w">　　代码示例：</p>
    <pre> 　　&lt;script&gt;
        　　window.onload = function () {
      　　　 　   document.getElementById('txt6').<span class="red">onmouseenter</span> = function () {
                      this.style.backgroundColor = 'pink';
                   };
                  document.getElementById('txt6').<span class="red">onmouseleave</span> = function () {
                      this.style.backgroundColor = 'red';
                   };
  　　　　}
        &lt;/script&gt;</pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onmouseover</span>：鼠标悬停 与 <span class="red">onmouseout</span>：鼠标离开 与 <span class="red">onmouseenter</span>：鼠标悬停 与 <span class="red">onmouseleave</span>：鼠标离开 的区别</p>
    <span class="f-w">　　事件示例：</span>
     <div id="mydiv1" style="height: 180px; width: 180px;border: 1px solid darkblue;">1
         <div id="mydiv2" style="width: 90px;height: 90px;border: 1px solid darkblue; "></div>
     </div>　　
    <div id="mydiv3" style="height: 180px; width: 180px;border: 1px solid darkblue;">2
        <div id="mydiv4" style="width: 90px;height: 90px;border: 1px solid darkblue; "></div>
    </div>　(当鼠标悬停在文本框，文本框变蓝色；当鼠标离开文本框，文本框变灰色)
    <p class="f-w">　　代码示例：</p>
    <pre> </pre>
    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onchange</span>：改变事件</p>
    <span class="f-w">　　事件示例：</span>
    <span style="color: #9a9a9a;">　　(双击按钮后 按钮的背景颜色变为橙色)</span>
    <p class="f-w">　　代码示例：</p>
    <pre> </pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onkeypress</span>：键盘事件</p>
    <span class="f-w">　　事件示例：</span><span style="color: #9a9a9a;">打开控制台看键盘输出的字母</span>
    <p class="f-w">　　代码示例：</p>
    <pre>
    window.onload = function () {
            document.body.<span class="red">onkeypress</span> = function (e) {
                console.info(e.code + ':' + e.keyCode);
            };
        };
    </pre>

    <hr style="border: 1px dashed gray;"/>

    <p>　　<span class="red">onkeyup</span>：键盘事件</p>
    <span class="f-w">　　事件示例：</span><span style="color: #9a9a9a;">打开控制台看键盘输出的字母</span>
    <p class="f-w">　　代码示例：</p>
    <pre>
    </pre>

    <hr style="border: 1px dashed gray;"/>


</fieldset>
</body>
</html>